<template>
	<div id="clue_add" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				线索详情
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<!--<div class="mark" :class="clue.isMatter=='1'? 'mark_active':''">
					{{clue.isMatter=='1'? '' : '非'}}重要线索
				</div>-->
				<div class="row">
					<div class="label">孩子姓名：</div>
					<div class="value" style="color: #3885f8;">
						{{clue.realName}}
						<span class="mark" :class="clue.isMatter=='1'? 'mark_active':''"></span>
							
					</div>
					
					<div class="label">性别：</div>
					<div class="value">{{genderMap[clue.gender]}}</div>
				</div>
				<div class="row row_2">
					<div class="label" style="letter-spacing: 0;">年级：</div>
					<div class="value">{{gradeMap[clue.grade]}}</div>
					
					<div class="label">学校：</div>
					<div class="value">{{clue.kindergarten}}</div>
					
					<div class="label">出生年月：</div>
					<div class="value_2">{{clue.birth}}</div>
				</div>
				<div class="row row_3" v-for="item in clue.parentData">
					<div class="label">家长姓名：</div>
					<div class="value_2 parent">{{item.parentName}}</div>
					<div class="value_2 relate">{{parentMap[item.parentType]}}</div>
					
					<div class="label">联系电话：</div>
					<div class="value" style="color: #3885f8;">{{item.phone}}</div>
					
					<div class="label">家长微信：</div>
					<div class="value_2">{{item.wechat}}</div>
				</div>
				
				<div class="row row_4">
					<div class="label">收货人：</div>
					<div class="value">
						{{clue.receiverName}}
						<span class="receivePhone">{{clue.receiverPhone?'（'+clue.receiverPhone+'）' : ''}}</span>
					</div>
					
					<div class="label">收货地址：</div>
					<div class="value_3">{{clue.address}}</div>
				</div>
				
				<div class="row row_5">
					<div class="label">渠道来源：</div>
					<div class="value">{{clue.channelName}}</div>
					
					<div class="label">线索状态：</div>
					<div class="value">{{statusMap[clue.clueStatus]}}</div>
					
					<div class="label">咨询日期：</div>
					<div class="value_2">{{clue.consultDate}}</div>
				</div>
				
				<div class="row row_5">
					<div class="label">意向校区：</div>
					<div class="value">{{clue.campusName}}</div>
				</div>
				
				<div class="row row_5">
					<div class="label">课程意向：</div>
					<div class="value course_div">
						<div class="course" v-for="item in clue.courseData">
							{{item.courseName}}
							<span>（{{item.intentionModeName}}）</span>
						</div>
					</div>
					
				</div>
				<!--<div class="row row_5">
					<div class="label">课程意向：</div>
					<div class="value">创意美术</div>
					
				</div>
				<div class="row row_5">
					<div class="label">课程意向：</div>
					<div class="value">创意美术</div>
					
				</div>-->
				
				<div class="row row_6">
					<div class="label">沟通记录：</div>
				</div>
				<div>
					<table class="table" v-show="visitList.length>0" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 3rem;">沟通日期</td>
								<td style="width: 4rem;">沟通内容</td>
								<td style="width: 1.5rem;">跟进人</td>
								<td style="width: 1.5rem;">操作人</td>
								<td style="width: 1.5rem;">线索状态</td>
								<td style="width: 3rem;">下次沟通时间</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item in visitList">
			  					<td>{{item.visitTime}}</td>
			  					<td>{{item.visitContent}}</td>
			  					<td>{{item.executeUserName}}</td>
			  					<td>{{item.createUserName}}</td>
			  					<td>{{statusMap[item.clueStatus]}}</td>
			  					<td>{{item.nextVisitTime}}</td>
			  				</tr>
						</tbody>
					</table>
				</div>
				<div class="row row_7">
					<div class="label">采单员：</div>
					<div class="value">{{clue.collectUserName}}</div>
					
					<div class="label">跟进人：</div>
					<div class="value" style="width: 2.3rem;">{{clue.executeUserName}}</div>
					
					<div class="label" style="width: 1.5rem;">下次沟通日期：</div>
					<div class="value_2" style="width: 2.1rem;">{{clue.nextVisitDate}}</div>
				</div>
			</div>
			
			<div class="btn_div" v-if="clue.clueStatus==1">
				<div class="btn_sure" v-if="hasApi('clueUpdate')" @click="openEdit()">编 辑</div>
				<div class="btn_cancel" @click="cancel()">返 回</div>
			</div>
			<div class="btn_div" v-else-if="clue.clueStatus!=7">
				<div class="btn_sure" v-if="hasApi('clueFree')" @click="openRelease()">线索释放</div>
				<div class="btn_sure" v-if="hasApi('clueUpdate')" @click="openEdit()">编 辑</div>
				<div class="btn_sure" v-if="hasApi('visitAdd')" @click="openVisitAdd()">回 访</div>
				<div class="btn_cancel" @click="cancel()">返 回</div>
			</div>
			<div class="btn_div" v-else>
				<div class="btn_cancel" @click="cancel()">返 回</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm,dict,user;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			clue : {},
			visitList : [],
			//数据字典
			genderMap : {},
			statusMap : {},
			parentMap : {},
		}
	},
	methods : {
		init : function(clue) {
			vm.show = true;
			vm.open = true;
			//初始化数据
			clue = tool.clone(clue);
			//剪切生日
			if(clue.birthday) {
				clue.birth = clue.birthday.substring(0,7);
			}
			//获取默认地址
			var useIndex = null;
			var addressList = clue.studentUserAddressEntityList;
			addressList.forEach(function(item,index) {
				if(item.isUse=='1') {
					useIndex = index;
					clue.receiverName = item.receiverName;
					clue.receiverPhone = item.receiverPhone;
					clue.address = item.province+item.city+item.area+" "+item.address;
					return false;
				}
			})
			if(useIndex == null && addressList.length > 0) {
				let item = addressList[0];
				clue.receiverName = item.receiverName;
				clue.receiverPhone = item.receiverPhone;
				clue.address = item.province+item.city+item.area+" "+item.address;
			}
			
			vm.clue = clue;
			
			vm.visitList = [];
			api.visitByClue({clueId : clue.clueId}).then(function(data) {
				vm.visitList = data.data.visitList;
				//赋值意向课程,因为原对象里面只有id没有名称
				vm.clue.courseData = data.data.clueInfo.courseData;
			})
		},
		cancel : function() {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		openRelease : function() {
			vm.cancel();
			vm.$emit('openRelease',vm.clue);
		},
		openEdit : function() {
			vm.cancel();
			vm.$emit('openEdit',vm.clue);
		},
		openVisitAdd : function() {
			vm.cancel();
			vm.$emit('openVisitAdd',vm.clue);
		}
	},
	created : function() {
		vm = this;
		
		dict = tool.getItem(lsKey.dict,true);
		user = tool.getItem(lsKey.user,true);
		
		vm.genderMap = tool.parseDict(dict["gender"]);
		vm.statusMap = tool.parseDict(dict["clue_status"]);
		vm.gradeMap = tool.parseDict(dict["grade_mode"]);
		vm.parentMap = tool.parseDict(dict["parent_mode"]);
		
	}
}

</script>

<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	.table {
		margin-top: 0.05rem;
		margin-bottom: 0.15rem;
	}
	.thead td {
		color: #939399;
	}
	.tbody td { 
		font-size: 0.16rem;
		color: #333333;
	}
	
	.form {
		padding: 0 0.4rem;
		position: relative;
	}
	.mark {
		display: inline-block;
		width: 0.2rem;
		height: 0.2rem;
		/*outline: 0.01rem solid red;*/
		background-image: url(../../../assets/img/clue_manage/mark.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center top; 
		position: relative;
		top: 0.03rem;
	}
	.mark_active {
		background-image: url(../../../assets/img/clue_manage/mark_active.png);
	}
	.row {
		overflow: hidden;
	}
	.row>div {
		height: 0.4rem;
		line-height: 0.4rem;
		float: left;
		/*内容超出省略号*/
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.row_2 {
		padding-bottom: 0.1rem;
		border-bottom: 0.01rem solid #f3f6fc;
		margin-bottom: 0.1rem;
	}
	.row_4 {
		margin-top: 0.1rem;
		border-top: 0.01rem solid #f3f6fc;
		padding-top: 0.1rem;
	}
	.label {
		/*outline: 1px solid red;*/
		width: 1.05rem;
		font-size: 0.16rem;
		color: #666666;
		text-align: right;
		padding-right: 0.1rem;
	}
	
	.value,.value_2,.value_3 {
		font-size: 0.18rem;
		color: #333333;
		letter-spacing: 0.02rem;
	}
	.value {
		width: 2.7rem;
	}
	.value_2 {
		width: 2.3rem;
	}
	.value_3 {
		width: 6.2rem;
	}
	
	.parent {
		width: 1.2rem !important;
		height: 0.31rem !important;
		line-height: 0.31rem !important;
		margin-top: 0.07rem;
		border-right: 0.01rem solid #dedede;
	}
	.relate {
		width: 1.5rem !important;
		padding-left: 0.3rem;
	}
	.course_div {
		width: 9.9rem;
		overflow: hidden;
		/*outline: 1px solid red;*/
	}
	.course {
		height: 0.24rem;
		line-height: 0.24rem;
		margin-top: 0.08rem;
		float: left;
		margin-left: 0.1rem;
		padding-left: 0.1rem;
		border-left: 0.01rem solid #dedede;
	}
	.course:first-child {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
	.course>span {
		color: #3885F8;
		font-size: 0.16rem;
	}
	.receivePhone {
		color: #3885F8;
		font-size: 0.16rem;
	}
</style>